<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>评价查看</title>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
	<link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}" />
	<link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}" />
	<link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}" />
	<!-- 引入组件库 -->
	<script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
	<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>
    	<!-- 页面头部 -->
		<div class="page-header">
			<h1 class="page-title">评价查看</h1>
			<div class="breadcrumb"><a href="javascript:top.location.reload();">首页</a><span>/</span>评价<span>/</span><a href="/vendor/cater/orderappraise/tolist">评价列表</a></div>
		</div><!-- 页面头部 end -->
    
    	<div class="main-content-body">
            <table class="table-view">
                <tr>
                    <th width="15%">订单号</th>
                    <td width="35%">{{dto.orderNo}}</td>
                    <th width="15%">评价人</th>
                    <td width="35%">{{dto.customerName}}</td>
                </tr>
                <tr>
                    <th>评分</th>
                    <td>{{dto.score}}</td>
                    <th>评价内容</th>
                    <td>{{dto.entityNo}}</td>
                </tr>
                <tr>
                    <th>评价时间</th>
                    <td>{{dto.createTime}}</td>
                    <th>显示状态</th>
                    <td>{{dto.auditStateName}}</td>
                </tr>
                <tr>
                    <th>评论图片</th>
                    <td colspan="3">
                    	<template v-if="!!dto.pic1"><img :src="dto.pic1" style="width: 80px;height: 80px"></template>
                    	<template v-if="!!dto.pic2"><img :src="dto.pic2" style="width: 80px;height: 80px"></template>
                    	<template v-if="!!dto.pic3"><img :src="dto.pic3" style="width: 80px;height: 80px"></template>
                    	<template v-if="!!dto.pic4"><img :src="dto.pic4" style="width: 80px;height: 80px"></template>
                    	<template v-if="!!dto.pic5"><img :src="dto.pic5" style="width: 80px;height: 80px"></template>
                    </td>
                </tr>
                <tr>
                    <th>回复内容</th>
                    <td colspan="3"><el-input placeholder="请输入回复内容" v-model="dto.replyContent" class="minW40 z_input-holder" ></el-input></td>
                </tr>
            </table>
    	</div>
    	
    	<div class="edit-button-fixed">
            <div class="edit-button z-yuan-butn">
            	<el-button type="primary" @click="reply">回复</el-button>
       			<el-button type="primary" @click="returnList">返回</el-button>
			</div>
		</div>
					
   	</div>
</div>
</body>
<script th:inline="javascript">
    new Vue({
        el: "#app",
        data:{
        	dto : [[${dto}]]
        },
        methods: {
        	returnList: function () {
        		window.location.href = "/vendor/cater/orderappraise/tolist";
            },
            reply: function(){
				var self = this;            	
            	$.ajax({
                    url: "/vendor/cater/orderappraise/reply",
                    type: "POST",
                    data: {uuid:self.dto.uuid,replyContent:self.dto.replyContent},
                    dataType: "json",
                    success: function(data) {
                        if (data && data.returnCode == "1") {
                            self.$message({
                                message: '回复成功',
                                type: 'success',
                                duration: 1000,
                                customClass: 'message-center',
                            });
                        } else {
                            self.$message({
                                message: data.returnNote,
                                type: 'error',
                                duration: 2000,
                                customClass: 'message-center',
                            });
                        }
                    }
                });
            }
        }
    });
</script>
</html>
